<?php if(!class_exists("View", false)) exit("no direct access allowed");?><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-10">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-3">帮助中心</h2>
            <p class="text-neutral-500 max-w-3xl">欢迎使用帮助中心。这里提供了详细的API文档和平台操作指南，帮助您快速掌握平台的使用方法。</p>
        </section>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
            <!-- 左侧导航 -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
                    <div class="relative mb-6">
                        <input type="text" placeholder="搜索帮助文档..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary text-sm">
                        <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400"></i>
                    </div>
                    
                    <nav class="space-y-1">
                        <h3 class="text-xs uppercase text-neutral-400 font-medium mb-3 pl-1">平台指南</h3>
                        
                        <a href="#getting-started" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm sidebar-active">
                            快速入门
                        </a>
                        
                        <a href="#account-management" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            账户管理
                        </a>
                        
                        <a href="#tool-usage" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            工具使用指南
                        </a>
                        
                        <a href="#billing" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            计费与充值
                        </a>
                        
                        <a href="#faq" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            常见问题
                        </a>
                        
                        <h3 class="text-xs uppercase text-neutral-400 font-medium mb-3 mt-6 pl-1">API文档</h3>
                        
                        <a href="#api-overview" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            API概述
                        </a>
                        
                        <a href="#authentication" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            身份验证
                        </a>
                        
                        <a href="#chat-api" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            对话API
                        </a>
                        
                        <a href="#image-api" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            图像生成API
                        </a>
                        
                        <a href="#video-api" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            视频生成API
                        </a>
                        
                        <a href="#rate-limits" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            速率限制
                        </a>
                        
                        <a href="#error-codes" class="block py-2 px-1 rounded hover:bg-neutral-100 transition-colors text-sm">
                            错误代码
                        </a>
                    </nav>
                    
                    <div class="mt-8 pt-6 border-t border-neutral-200">
                        <h3 class="font-medium mb-3">需要更多帮助？</h3>
                        <a href="#contact" class="flex items-center justify-center space-x-2 bg-primary hover:bg-primary/90 text-white font-medium px-4 py-2.5 rounded-lg transition-all text-sm">
                            <i class="fa fa-headphones"></i>
                            <span>联系支持团队</span>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 右侧内容区 -->
            <div class="lg:col-span-3">
                <div class="bg-white rounded-xl shadow-sm p-6 md:p-8">
                    <!-- 快速入门 -->
                    <section id="getting-started" class="mb-12 scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">快速入门</h3>
                        
                        <div class="space-y-6">
                            <p class="text-neutral-600">AI工具箱是一个集成多种人工智能功能的平台，帮助您轻松完成各种任务。以下是使用平台的基本步骤：</p>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                                <div class="bg-neutral-50 p-5 rounded-lg">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3">
                                        <i class="fa fa-user-plus"></i>
                                    </div>
                                    <h4 class="font-bold mb-2">1. 创建账户</h4>
                                    <p class="text-sm text-neutral-600">注册并登录账户，获取免费使用额度，开始体验AI工具。</p>
                                </div>
                                
                                <div class="bg-neutral-50 p-5 rounded-lg">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3">
                                        <i class="fa fa-th-large"></i>
                                    </div>
                                    <h4 class="font-bold mb-2">2. 选择工具</h4>
                                    <p class="text-sm text-neutral-600">从左侧工具栏选择所需的AI工具，如对话、绘图或视频生成。</p>
                                </div>
                                
                                <div class="bg-neutral-50 p-5 rounded-lg">
                                    <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3">
                                        <i class="fa fa-magic"></i>
                                    </div>
                                    <h4 class="font-bold mb-2">3. 使用工具</h4>
                                    <p class="text-sm text-neutral-600">配置参数并输入内容，点击生成按钮获取AI生成的结果。</p>
                                </div>
                            </div>
                            
                            <div class="border-l-4 border-primary pl-4 py-1 my-6">
                                <p class="text-neutral-600 italic">提示：新用户注册后将获得100个积分，可用于体验所有AI工具。不同工具消耗的积分不同。</p>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 工具使用指南 -->
                    <section id="tool-usage" class="mb-12 scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">工具使用指南</h3>
                        
                        <div class="space-y-8">
                            <div>
                                <h4 class="text-xl font-medium mb-3">AI对话工具</h4>
                                <p class="text-neutral-600 mb-4">AI对话工具允许您与人工智能进行自然语言交互，获取信息、解答问题或进行创意协作。</p>
                                
                                <div class="bg-neutral-50 p-4 rounded-lg mb-4">
                                    <h5 class="font-medium mb-2">使用步骤：</h5>
                                    <ol class="list-decimal pl-5 space-y-2 text-neutral-600">
                                        <li>从模型下拉菜单选择合适的AI模型</li>
                                        <li>在输入框中输入您的问题或指令</li>
                                        <li>点击"发送"按钮或按Enter键提交</li>
                                        <li>等待AI生成回复，通常需要几秒钟</li>
                                        <li>可以继续追问或提出新的问题</li>
                                    </ol>
                                </div>
                                
                                <div class="bg-primary/5 p-4 rounded-lg">
                                    <h5 class="font-medium mb-2 text-primary">使用技巧：</h5>
                                    <ul class="list-disc pl-5 space-y-2 text-neutral-600">
                                        <li>问题越具体，得到的答案越精准</li>
                                        <li>可以指定回答的格式，如"以列表形式回答"</li>
                                        <li>复杂问题可以拆分成多个小问题</li>
                                        <li>使用历史记录功能可以快速找回之前的对话</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-xl font-medium mb-3">AI绘图工具</h4>
                                <p class="text-neutral-600 mb-4">AI绘图工具可以根据文本描述生成高质量图像，支持多种风格和尺寸。</p>
                                
                                <div class="bg-neutral-50 p-4 rounded-lg">
                                    <h5 class="font-medium mb-2">提示词撰写技巧：</h5>
                                    <ul class="list-disc pl-5 space-y-2 text-neutral-600">
                                        <li>描述主体内容：人物、场景、物体等</li>
                                        <li>指定艺术风格：写实、动漫、油画、素描等</li>
                                        <li>描述光线和氛围：明亮、昏暗、温暖、神秘等</li>
                                        <li>添加细节：如"8K分辨率，超写实，景深效果"</li>
                                        <li>使用负面提示词排除不想要的元素</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-xl font-medium mb-3">AI视频生成工具</h4>
                                <p class="text-neutral-600 mb-4">AI视频生成工具可以根据文本描述创建短视频，支持多种风格和时长。</p>
                                
                                <div class="bg-neutral-50 p-4 rounded-lg">
                                    <h5 class="font-medium mb-2">注意事项：</h5>
                                    <ul class="list-disc pl-5 space-y-2 text-neutral-600">
                                        <li>视频生成需要较长时间，请耐心等待</li>
                                        <li>较长的视频会消耗更多积分</li>
                                        <li>可以上传初始图像作为视频生成的基础</li>
                                        <li>复杂场景可能需要多次尝试才能获得理想效果</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- API概述 -->
                    <section id="api-overview" class="mb-12 scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">API概述</h3>
                        
                        <div class="space-y-6">
                            <p class="text-neutral-600">AI工具箱提供了一系列API接口，允许开发者将AI功能集成到自己的应用程序中。我们的API设计简洁易用，支持多种编程语言。</p>
                            
                            <div class="bg-neutral-50 p-5 rounded-lg">
                                <h4 class="font-medium mb-3">支持的API类型</h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    <div class="flex items-center p-3 border border-neutral-200 rounded-lg">
                                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
                                            <i class="fa fa-comments"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm">对话API</h5>
                                            <p class="text-xs text-neutral-500">文本生成与对话交互</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center p-3 border border-neutral-200 rounded-lg">
                                        <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary mr-3">
                                            <i class="fa fa-image"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm">图像API</h5>
                                            <p class="text-xs text-neutral-500">图像生成与处理</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center p-3 border border-neutral-200 rounded-lg">
                                        <div class="w-10 h-10 rounded-full bg-accent/10 flex items-center justify-center text-accent mr-3">
                                            <i class="fa fa-video-camera"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm">视频API</h5>
                                            <p class="text-xs text-neutral-500">视频生成与编辑</p>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center p-3 border border-neutral-200 rounded-lg">
                                        <div class="w-10 h-10 rounded-full bg-warning/10 flex items-center justify-center text-warning mr-3">
                                            <i class="fa fa-microphone"></i>
                                        </div>
                                        <div>
                                            <h5 class="font-medium text-sm">语音API</h5>
                                            <p class="text-xs text-neutral-500">语音合成与识别</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <p class="text-neutral-600">所有API端点都遵循RESTful设计原则，基础URL为：</p>
                            <div class="bg-dark text-white p-4 rounded-lg overflow-x-auto text-sm font-mono">
                                https://api.aitoolbox.com/v1
                            </div>
                        </div>
                    </section>
                    
                    <!-- 身份验证 -->
                    <section id="authentication" class="mb-12 scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">身份验证</h3>
                        
                        <div class="space-y-6">
                            <p class="text-neutral-600">使用AI工具箱API需要进行身份验证。我们采用API密钥的方式进行身份验证，确保您的API调用安全。</p>
                            
                            <div>
                                <h4 class="text-lg font-medium mb-3">获取API密钥</h4>
                                <ol class="list-decimal pl-5 space-y-2 text-neutral-600 mb-4">
                                    <li>登录AI工具箱账户</li>
                                    <li>进入"账户设置"页面</li>
                                    <li>点击"API密钥"选项卡</li>
                                    <li>点击"生成新密钥"按钮</li>
                                    <li>为您的密钥命名并保存</li>
                                </ol>
                                
                                <div class="bg-neutral-50 p-4 rounded-lg">
                                    <p class="text-sm text-neutral-600"><strong>注意：</strong> 请妥善保管您的API密钥，不要分享给他人。如果您怀疑密钥已泄露，请立即在平台上吊销该密钥并生成新的密钥。</p>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-lg font-medium mb-3">使用API密钥</h4>
                                <p class="text-neutral-600 mb-3">在API请求中，需要在HTTP头部包含您的API密钥：</p>
                                
                                <div class="bg-dark text-white p-4 rounded-lg overflow-x-auto mb-4">
                                    <pre><code>Authorization: Bearer YOUR_API_KEY</code></pre>
                                </div>
                                
                                <h5 class="font-medium mb-2">示例请求（cURL）：</h5>
                                <div class="bg-dark text-white p-4 rounded-lg overflow-x-auto">
                                    <pre><code class="language-bash">curl https://api.aitoolbox.com/v1/models \
  -H "Authorization: Bearer YOUR_API_KEY"</code></pre>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 对话API -->
                    <section id="chat-api" class="mb-12 scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">对话API</h3>
                        
                        <div class="space-y-6">
                            <p class="text-neutral-600">对话API允许您与AI模型进行交互，生成文本响应。支持多轮对话和上下文保持。</p>
                            
                            <div>
                                <h4 class="text-lg font-medium mb-3">创建对话</h4>
                                <p class="text-neutral-600 mb-3">使用以下端点创建新的对话：</p>
                                
                                <div class="bg-dark text-white p-3 rounded-t-lg overflow-x-auto text-sm font-mono">
                                    POST /chat/completions
                                </div>
                                
                                <div class="border border-t-0 border-neutral-700 bg-neutral-800 text-white p-4 rounded-b-lg overflow-x-auto">
                                    <pre><code class="language-json">{
  "model": "gpt-4",
  "messages": [
    {"role": "system", "content": "你是一个 helpful 的助手。"},
    {"role": "user", "content": "什么是人工智能？"}
  ],
  "temperature": 0.7,
  "max_tokens": 1000
}</code></pre>
                                </div>
                                
                                <h5 class="font-medium mt-4 mb-2">参数说明：</h5>
                                <div class="overflow-x-auto">
                                    <table class="min-w-full border border-neutral-200 rounded-lg">
                                        <thead>
                                            <tr class="bg-neutral-50">
                                                <th class="py-2 px-4 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider border-b">参数</th>
                                                <th class="py-2 px-4 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider border-b">类型</th>
                                                <th class="py-2 px-4 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider border-b">描述</th>
                                            </tr>
                                        </thead>
                                        <tbody class="divide-y divide-neutral-200">
                                            <tr>
                                                <td class="py-2 px-4 text-sm">model</td>
                                                <td class="py-2 px-4 text-sm">string</td>
                                                <td class="py-2 px-4 text-sm">要使用的模型名称，如"gpt-4"、"gpt-3.5"</td>
                                            </tr>
                                            <tr>
                                                <td class="py-2 px-4 text-sm">messages</td>
                                                <td class="py-2 px-4 text-sm">array</td>
                                                <td class="py-2 px-4 text-sm">对话消息数组，包含角色和内容</td>
                                            </tr>
                                            <tr>
                                                <td class="py-2 px-4 text-sm">temperature</td>
                                                <td class="py-2 px-4 text-sm">number</td>
                                                <td class="py-2 px-4 text-sm">控制输出的随机性，0-1之间，值越高越随机</td>
                                            </tr>
                                            <tr>
                                                <td class="py-2 px-4 text-sm">max_tokens</td>
                                                <td class="py-2 px-4 text-sm">integer</td>
                                                <td class="py-2 px-4 text-sm">生成的最大token数量</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                
                                <h5 class="font-medium mt-4 mb-2">响应示例：</h5>
                                <div class="bg-dark text-white p-4 rounded-lg overflow-x-auto">
                                    <pre><code class="language-json">{
  "id": "chatcmpl-123",
  "object": "chat.completion",
  "created": 1677652288,
  "model": "gpt-4",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "人工智能（Artificial Intelligence，简称AI）是计算机科学的一个分支..."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 10,
    "completion_tokens": 150,
    "total_tokens": 160
  }
}</code></pre>
                                </div>
                            </div>
                            
                            <div>
                                <h4 class="text-lg font-medium mb-3">代码示例</h4>
                                
                                <div class="mb-4">
                                    <div class="flex items-center bg-neutral-800 text-white px-4 py-2 rounded-t-lg">
                                        <span class="text-sm font-medium mr-2">Python</span>
                                        <button class="copy-btn ml-auto text-neutral-300 hover:text-white">
                                            <i class="fa fa-copy"></i>
                                        </button>
                                    </div>
                                    <div class="bg-dark text-white p-4 rounded-b-lg overflow-x-auto">
                                        <pre><code class="language-python">import requests

url = "https://api.aitoolbox.com/v1/chat/completions"
api_key = "YOUR_API_KEY"

headers = {
    "Content-Type": "application/json",
    "Authorization": f"Bearer {api_key}"
}

data = {
    "model": "gpt-4",
    "messages": [
        {"role": "user", "content": "什么是人工智能？"}
    ]
}

response = requests.post(url, json=data, headers=headers)
result = response.json()

print(result["choices"][0]["message"]["content"])</code></pre>
                                    </div>
                                </div>
                                
                                <div>
                                    <div class="flex items-center bg-neutral-800 text-white px-4 py-2 rounded-t-lg">
                                        <span class="text-sm font-medium mr-2">JavaScript</span>
                                        <button class="copy-btn ml-auto text-neutral-300 hover:text-white">
                                            <i class="fa fa-copy"></i>
                                        </button>
                                    </div>
                                    <div class="bg-dark text-white p-4 rounded-b-lg overflow-x-auto">
                                        <pre><code class="language-javascript">const apiKey = "YOUR_API_KEY";
const url = "https://api.aitoolbox.com/v1/chat/completions";

async function getChatResponse() {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-4",
      messages: [
        { role: "user", content: "什么是人工智能？" }
      ]
    })
  });
  
  const data = await response.json();
  console.log(data.choices[0].message.content);
}

getChatResponse();</code></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 图像生成API -->
                    <section id="image-api" class="mb-12 scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">图像生成API</h3>
                        
                        <div class="space-y-6">
                            <p class="text-neutral-600">图像生成API允许您通过文本描述生成高质量图像，支持多种风格和参数配置。</p>
                            
                            <div>
                                <h4 class="text-lg font-medium mb-3">生成图像</h4>
                                <p class="text-neutral-600 mb-3">使用以下端点生成新图像：</p>
                                
                                <div class="bg-dark text-white p-3 rounded-t-lg overflow-x-auto text-sm font-mono">
                                    POST /images/generations
                                </div>
                                
                                <div class="border border-t-0 border-neutral-700 bg-neutral-800 text-white p-4 rounded-b-lg overflow-x-auto">
                                    <pre><code class="language-json">{
  "model": "midjourney",
  "prompt": "一片宁静的湖泊，周围环绕着雪山，日出时分，写实风格，8K分辨率",
  "negative_prompt": "模糊，低质量，卡通",
  "num_images": 4,
  "size": "1024x1024",
  "style": "photorealistic"
}</code></pre>
                                </div>
                                
                                <h5 class="font-medium mt-4 mb-2">响应示例：</h5>
                                <div class="bg-dark text-white p-4 rounded-lg overflow-x-auto">
                                    <pre><code class="language-json">{
  "id": "img-123",
  "object": "image.generation",
  "created": 1677652288,
  "model": "midjourney",
  "data": [
    {
      "url": "https://api.aitoolbox.com/v1/images/123-0.png",
      "width": 1024,
      "height": 1024
    },
    {
      "url": "https://api.aitoolbox.com/v1/images/123-1.png",
      "width": 1024,
      "height": 1024
    }
  ]
}</code></pre>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- 联系支持 -->
                    <section id="contact" class="scroll-mt-24">
                        <h3 class="text-2xl font-bold mb-4">联系支持团队</h3>
                        
                        <div class="space-y-6">
                            <p class="text-neutral-600">如果您在使用过程中遇到任何问题，或有任何建议，请通过以下方式联系我们的支持团队：</p>
                            
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="border border-neutral-200 rounded-lg p-5 text-center">
                                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-3">
                                        <i class="fa fa-envelope"></i>
                                    </div>
                                    <h4 class="font-medium mb-2">电子邮件</h4>
                                    <a href="mailto:support@aitoolbox.com" class="text-primary hover:underline text-sm">support@aitoolbox.com</a>
                                </div>
                                
                                <div class="border border-neutral-200 rounded-lg p-5 text-center">
                                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-3">
                                        <i class="fa fa-comments"></i>
                                    </div>
                                    <h4 class="font-medium mb-2">在线聊天</h4>
                                    <p class="text-sm text-neutral-600">工作日 9:00-18:00</p>
                                </div>
                                
                                <div class="border border-neutral-200 rounded-lg p-5 text-center">
                                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mx-auto mb-3">
                                        <i class="fa fa-question-circle"></i>
                                    </div>
                                    <h4 class="font-medium mb-2">提交工单</h4>
                                    <a href="#" class="text-primary hover:underline text-sm">提交支持请求</a>
                                </div>
                            </div>
                            
                            <div class="bg-neutral-50 p-5 rounded-lg">
                                <h4 class="font-medium mb-3">提交反馈</h4>
                                <form class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">反馈类型</label>
                                        <select class="w-full bg-white border border-neutral-200 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                                            <option>功能问题</option>
                                            <option>API问题</option>
                                            <option>账户问题</option>
                                            <option>建议与反馈</option>
                                            <option>其他问题</option>
                                        </select>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium mb-1">描述您的问题</label>
                                        <textarea class="w-full bg-white border border-neutral-200 rounded-lg px-3 py-2.5 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none" rows="4"></textarea>
                                    </div>
                                    
                                    <div>
                                        <label class="block text-sm font-medium mb-1">上传截图（可选）</label>
                                        <div class="border-2 border-dashed border-neutral-300 rounded-lg p-4 text-center hover:border-primary transition-colors cursor-pointer">
                                            <i class="fa fa-cloud-upload text-xl text-neutral-400 mb-2"></i>
                                            <p class="text-sm text-neutral-500">点击上传或拖放文件至此处</p>
                                        </div>
                                    </div>
                                    
                                    <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium px-6 py-2.5 rounded-lg transition-all shadow-sm hover:shadow">
                                        提交反馈
                                    </button>
                                </form>
                            </div>
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-neutral-200 py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row items-center justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center">
                        <i class="fa fa-robot text-white"></i>
                    </div>
                    <span class="font-bold">AI工具箱</span>
                </div>
                
                <div class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-neutral-500">
                    <a href="#" class="hover:text-primary transition-colors">关于我们</a>
                    <a href="#" class="hover:text-primary transition-colors">使用条款</a>
                    <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
                    <a href="#" class="hover:text-primary transition-colors">帮助中心</a>
                    <a href="#" class="hover:text-primary transition-colors">联系我们</a>
                </div>
                
                <div class="mt-4 md:mt-0 text-sm text-neutral-400">
                    © 2023 AI工具箱. 保留所有权利.
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化代码高亮
            hljs.highlightAll();
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                        
                        // 更新侧边栏激活状态
                        document.querySelectorAll('.sidebar-active').forEach(item => {
                            item.classList.remove('sidebar-active');
                        });
                        this.classList.add('sidebar-active');
                    }
                });
            });
            
            // 复制代码按钮功能
            document.querySelectorAll('.copy-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const codeBlock = this.closest('div').nextElementSibling.querySelector('code');
                    const textToCopy = codeBlock.textContent;
                    
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        const originalIcon = this.innerHTML;
                        this.innerHTML = '<i class="fa fa-check"></i>';
                        
                        setTimeout(() => {
                            this.innerHTML = originalIcon;
                        }, 2000);
                    });
                });
            });
            
            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const header = document.querySelector('header');
                if (window.scrollY > 10) {
                    header.classList.add('shadow-sm');
                } else {
                    header.classList.remove('shadow-sm');
                }
            });
        });
    </script>